<template>
    <div id="aboutUs" class="mt-3">
        <div class="row mb-5 left-module">
            <div class="col-4">
                <div class="list-group mb-5">
                    <router-link class="nav-link" tag="li" :to="navList.to" v-for="(navList, key) in navLists" :key="key" exact><a class="list-group-item list-group-item-action">{{navList.name}}</a></router-link>
                </div>
            </div>
            <div class="col-8 right-module">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AboutUs",
        data() {
            return {
                navLists: [
                    {to: {name: "HistoricalOrder"}, name: "历史订单"},
                    {to: {name: "ContactUs"}, name: "联系我们"},
                    {to: {name: "OrderDocument"}, name: "点餐文档"},
                    {to: {name: "ExpressDelivery"}, name: "快递信息"}
                ]
            }
        }
    }
</script>

<style scoped>
    #aboutUs .left-module .col-4 .list-group .router-link-exact-active.router-link-active a {background-color: #f8f9fa;}
</style>